<main class="" th:fragment="commodityStaticAdmin">
    <body>


    <div id="dataStaticsAll" style="margin-top: 20px;width: 1280px;height:400px;"></div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="dataStaticL" style="width: 1280px;height:400px;"></div>
    <div id="dataStaticsGroupByWarehouse" style="width: 1280px;height:400px;"></div>
    <div id="dataStaticsGroupBySupplier" style="width: 1280px;height:400px;"></div>


    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var dataStaticL = echarts.init(document.getElementById('dataStaticL'));
        var dataStaticsGroupByWarehouse = echarts.init(document.getElementById('dataStaticsGroupByWarehouse'));
        var dataStaticsGroupBySupplier = echarts.init(document.getElementById('dataStaticsGroupBySupplier'));
        var dataStaticsAll = echarts.init(document.getElementById('dataStaticsAll'));

        echarsFunction();
        echarsGroupByWarehouse();
        echarsGroupBySupplier();
        echarsAll();

        let img = "";
        //下载
        function Export_Excel() {
            if(!img){
                var xmlhttp;
                if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.open("POST", "/imageExport", true);//设置请求方式
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");//设置请求头
                xmlhttp.onreadystatechange = function () {//请求成功后 调用函数
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        img = xmlhttp.responseText;
                        console.log(img);
                    }
                };
                xmlhttp.send("Url="+getFullCanvasDataURL('dataStaticsAll'));//生成图片
            }
            $.messager.confirm('Confirm', '确定下载Excel文件吗?', function (r) {
                if (img) {
                    var form=$("<form>");//定义一个form表单
                    form.attr("style","display:none");
                    form.attr("target","");
                    form.attr("method","post");
                    form.attr("action","/Export_Excel");
                    var input1=$("<input>");
                    input1.attr("type","hidden");
                    input1.attr("name","URL");
                    input1.attr("value",img);
                    $("body").append(form);//将表单放置在web中
                    form.append(input1);
                    form.submit();//表单提交

                }else{
                    alert("图片正在生成");
                }
            });

        }
        function echarsFunction() {
            //获取数据
            $.ajax({
                url: '/commodity/s',
                data: {
                    'type': "userHome"
                },
                success: function (data) {
                    if (data) {
                        var dataName = [];
                        var dataNum = [];
                        data.rows.forEach(function (element) {
                            dataName.push(element.name);
                            dataNum.push(element.stock);
                        });
                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: '商品库存分布图'
                            },
                            tooltip: {},
                            legend: {
                                data: ['库存数']
                            },
                            xAxis: {
                                data: dataName
                            },
                            yAxis: {},

                            series: [{
                                name: '库存数',
                                type: 'bar',

                                data: dataNum
                            }
                            ],
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        dataStaticL.setOption(option);

                        //console.log(getFullCanvasDataURL('dataStaticL'));
                    }
                }
            });
        }

        function echarsGroupByWarehouse() {
            //获取数据
            $.ajax({
                url: '/commodity/sGroupByWarehouse',
                success: function (data) {
                    if (data) {
                        var dataName = [];
                        var dataNum = [];
                        data.rows.forEach(function (element) {
                            dataName.push(element.warehouseName);
                            dataNum.push(element.stock);
                        });
                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: '仓库分布图'
                            },
                            tooltip: {},
                            legend: {
                                data: ['仓库数']
                            },
                            xAxis: {
                                data: dataName
                            },
                            yAxis: {},

                            series: [{
                                name: '仓库数',
                                type: 'bar',
                                data: dataNum
                            }
                            ],
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        dataStaticsGroupByWarehouse.setOption(option);
                    }
                }
            });
        }

        function echarsGroupBySupplier() {
            //获取数据
            $.ajax({
                url: '/commodity/sGroupBySupplier',
                success: function (data) {
                    if (data) {
                        var dataName = [];
                        var dataNum = [];
                        data.rows.forEach(function (element) {
                            dataName.push(element.supplierName);
                            dataNum.push(element.stock);
                        });
                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: '供应商分布图'
                            },
                            tooltip: {},
                            legend: {
                                data: ['供应商次数']
                            },
                            xAxis: {
                                data: dataName
                            },
                            yAxis: {},

                            series: [{
                                name: '供应商次数',
                                type: 'bar',
                                data: dataNum
                            }
                            ],
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        dataStaticsGroupBySupplier.setOption(option);
                    }
                }
            });
        }

        function echarsAll() {
            var dataName = [];
            var dataIdData = [];
            var dataCommodityData = [];
            var dataCommodityStackData = [];

            //获取仓库
            $.ajax({
                url: '/commodity/sGroupByWarehouse',
                async: false,
                success: function (data) {
                    if (data) {

                        data.rows.forEach(function (element) {
                            dataName.push(element.warehouseName);
                            dataIdData.push(element.warehouseId);
                        });
                    }
                }
            });
            //获取商品
            $.ajax({
                url: '/commodity/sGroupByRemarks',
                async: false,
                success: function (data) {
                    if (data) {
                        data.rows.forEach(function (element) {
                            dataCommodityData.push(element.name);
                        });
                    }
                }
            });
            let seriesArr = [];
            let seriesArrData = [];
            forEach_();

            async function forEach_() {
                await  dataIdData.forEach(_c => {
                    let save = [];
                    dataCommodityData.forEach(__c => {
                        //获取数据
                        $.ajax({
                            url: '/commodity/s',
                            async: false,
                            data: {
                                'warehouseId': _c,
                                'name': __c
                            },
                            success: function (data) {
                                if (data) {
                                    if (data.rows.length > 0) {
                                        data.rows.forEach(function (element) {
                                            save.push(element.stock);
                                        });
                                    } else {
                                        save.push(0);
                                    }

                                } else {
                                    save.push(0);
                                }
                            }
                        });
                    });
                    seriesArrData.push(save);
                })
            }

            var i = 0;

            dataCommodityData.forEach(__c => {
                let save = [];
                seriesArrData.forEach(_c => {
                    save.push(_c[i]);
                })
                i++;
                seriesArr.push({
                    name: __c,
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: save
                })
            });



            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '仓库货品展示图'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // Use axis to trigger tooltip
                        type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                legend: {
                    data: dataCommodityData

                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: dataName
                },
                series: seriesArr
            };

            // 使用刚指定的配置项和数据显示图表。
            dataStaticsAll.setOption(option);
        }


        function getFullCanvasDataURL(divId){
             let imagUrl = dataStaticsAll.getConnectedDataURL({
                pixelRatio: 5,//导出的图片分辨率比率,默认是1
                backgroundColor: '#FFFFFF',//图表背景色
                excludeComponents: [//保存图表时忽略的工具组件,默认忽略工具栏
                    'toolbox',
                    'dataZoom'
                ],
                type: 'png'//图片类型支持png和jpeg
            });
            imagUrl = encodeURIComponent(imagUrl);
            console.log(imagUrl)
            return imagUrl;
        }

    </script>
    </body>
</main>